<template>
    <div class="project-change-view">

      <el-form :inline="true" :model="formData" class="demo-form-inline" label-width="120px" size="medium" label-position="left">

        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称">
              <span>{{formData.project_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目编号">
              <span>{{formData.project_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计划开始时间">
              <el-date-picker
                @change="startchange"
                v-model="formData.startDate"
                type="date"
                :editable="false"
                :clearable="false"
                placeholder="请选择开始时间"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计划结束时间">
              <el-date-picker
                @change="endchange"
                v-model="formData.endDate"
                type="date"
                :editable="false"
                :clearable="false"
                placeholder="请选择结束时间"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="工期（天）">
              <el-input v-model="formData.duration" @keyup.native="durationProving" @blur="blur"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目负责人" prop="value">
<!--              <el-cascader v-model="formData.value"-->
<!--                           :show-all-levels="false"-->
<!--                           :options="departments"-->
<!--                           :props="props"-->
<!--                           :placeholder="formData.project_person_in_charge"-->
<!--                           :change-on-select="false"-->
<!--                           @change="cascaderChange">-->
<!--                <template slot-scope="{ node, data }">-->
<!--                  <span v-if="node.level == 1">{{ data.department_name }}</span>-->
<!--                  <span v-else>{{ data.user_name }}</span>-->
<!--                </template>-->
<!--              </el-cascader>-->

              <el-cascader
                :show-all-levels="false"
                v-model="formData.value"
                placeholder="请选择项目负责人"
                :options="options11"
                @change="handleChange"
                filterable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <el-form ref="causeForm" :model="formData" class="demo-form-inline" label-width="120px" size="medium" label-position="left" :rules="rules">

        <el-form-item label="变更原因" prop="change_cause_id">
          <el-select v-model="formData.change_cause_id" placeholder="请选择变更原因" @change="causeChange">
            <el-option
              v-for="item in causes"
              :key="item.id"
              :label="item.dict_val"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细描述" prop="work_content">
          <div class="textarea">
            <el-input
              v-model="formData.details_describe"
              placeholder="请输入详细描述"
              type="textarea"
              :rows="2">
            </el-input>
          </div>

        </el-form-item>

        <el-form-item label="变更影响程度" prop="change_level_id">
          <el-select v-model="formData.change_level_id" placeholder="请选择变更影响程度" @change="levelChange">
            <el-option
              v-for="item in changes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="变更影响描述">
          <el-input v-model="formData.change_describe" placeholder="请输入变更影响描述" type="textarea" :rows="2"></el-input>
        </el-form-item>

        <el-form-item label="附件">
          <upload ref="upload" :edit-list="formData.files" @uploadSuccess="uploadSuccess" @deleteSuccess="deleteSuccess" />
        </el-form-item>

      </el-form>

    </div>
</template>

<script>
  import {lookInfoSet} from "../../../../../api/printSetting";

  export default {
        name: "projectChange",
        data:function () {
            return{
                formData:{
                    plan_name:'',
                    startDate:'',
                    endDate:'',
                    duration:0,
                    value:'',
                    project_person_in_charge_id:0,
                    project_person_in_charge:'',
                    change_level_id:"",
                    change_level:'',
                    change_describe:'',
                },
                pickerOptions: {
                    disabledDate:time=> {
                        return time.getTime() < new Date().getTime();
                    }
                },
                departments:[],
                props: {
                    value:'id',
                    label:'department_name',
                    lazy: true,
                    lazyLoad : ((node, resolve) => {

                        if (node.level == 1){
                            if (node.data){
                                let d = {
                                    department_id:node.data.id,
                                    limit:1000,
                                    skip:1,
                                    user_status:1,
                                }

                                this.$api.GET_USER_LIST(d).then(res=>{
                                    if (res.code == 200){

                                        for (let i = 0; i < res.data.data.length; i++){
                                            res.data.data[i].leaf = true;
                                            res.data.data[i].department_name = res.data.data[i].user_name
                                        }
                                        this.departmentMembers = res.data.data;
                                        resolve(res.data.data);
                                    }
                                })
                            }
                        }
                    })
                },
                departmentMembers:[],
                causes:[],
                changes:[
                    {
                        value:1,
                        label:'轻微'
                    },
                    {
                        value:2,
                        label:'一般'
                    },
                    {
                        value:3,
                        label:'严重'
                    },
                ],
                rules: {
                    startDate: [
                        { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    endDate: [
                        { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                    duration: [
                        { required: true, message: '请输入工期', trigger: 'blur' }
                    ],
                    change_cause_id: [
                        { required: true, message: '请选择变更原因', trigger: 'change' }
                    ],
                    change_level_id:[
                        { required: true, message: '请选择变更影响程度', trigger: 'change' }
                    ],
                },
                options11:[]
            }
        },
        created:function(){
            this.$api.USER_GROUP_DEPARTMENT_LIST().then(res=>{
                if (res.code == 200){
                    res.data.data.forEach(mem=>{
                        mem.label = mem.name
                        mem.value = mem.id
                        if (!mem.children || !mem.children.length){
                            mem.leaf = true
                        }else if (mem.children.length) {
                            mem.children.forEach(item=>{
                                item.leaf = true;
                                item.value = item.id;
                                item.label = item.name;
                                item.department_id = item.id;
                            })
                        }
                    })
                    this.options11 = res.data.data;
                }else{
                    this.$message.error(res.msg)
                }
            });

            lookInfoSet({dictType:'project_change_reason'}).then(res=>{
                if (res.code == 200){
                    this.causes = res.data
                }
            })
        },
        mounted:function() {
            this.departments = this.$store.getters.department
        },
        methods:{
            handleChange:function(value){

                if (value && value[1]){
                    let index = this.options11.findIndex(a=>a.id == value[0])
                    if (index != -1){
                        let dep = this.options11[index]
                        let index1 = dep.children.findIndex(a=>a.id == value[1])
                        if (index1){
                            this.formData.project_person_in_charge_id = dep.children[index1].id
                            this.formData.project_person_in_charge = dep.children[index1].name
                        }
                    }
                }
            },
            validateForm:function(){
                return this.$refs.causeForm.validate()
            },
            deleteSuccess() {
                this.formData.files = this.$refs.upload.emitFileList()
            },
            uploadSuccess() {
                this.formData.files = this.$refs.upload.emitFileList()
            },
            causeChange:function(id){
                let index = this.causes.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.causes[index]
                    // this.formData.change_cause_id = data.id;
                    this.formData.change_cause = data.dict_val;
                }
            },
            levelChange:function(id){
                let index = this.changes.findIndex(a=>a.value == id)
                if (index != -1){
                    let data = this.changes[index]
                    this.formData.change_level = data.label;
                }
            },
            cascaderChange:function(node){
                if(node && node[1]){
                    let a = this.departmentMembers.findIndex(a=>a.id == node[1])
                    if (a != -1){
                        //this.value = this.value + "/" + this.departmentMembers[a].user_name
                        this.formData.project_person_in_charge_id = this.departmentMembers[a].id
                        this.formData.project_person_in_charge = this.departmentMembers[a].user_name
                    }
                }

            },
            setData:function (data) {
                this.formData.project_name = data.project_name;
                this.formData.project_no = data.project_no;
                this.formData.startDate = data.plan_start_time;
                this.formData.endDate = data.plan_end_time;
                this.formData.project_person_in_charge = data.project_person_in_charge;
                this.formData.project_person_in_charge_id = data.project_person_in_charge_id;
                this.formData.duration = data.duration

            },
            startchange:function(){
                if (this.formData.startDate != ''){
                    this.formData.startDate = this.dealDateStr(this.formData.startDate)  + " 00:00:00"
                    this.formData.start_date = this.formData.startDate

                }
                if (this.formData.duration){
                    this.formData.endDate = this.dealDate(this.formData.startDate,this.formData.duration) + " 23:59:59"
                    this.formData.end_date = this.formData.endDate
                }else if (this.formData.endDate){
                    let  startDate = Date.parse(this.formData.startDate);
                    let  endDate = Date.parse(this.formData.endDate);
                    if (startDate>endDate){
                        this.formData.duration = 0;
                    }else if (startDate==endDate){
                        this.formData.duration = 0
                    }else{
                        let num = ((endDate - startDate)/(1*24*60*60*1000)).toFixed(0)
                        this.formData.duration = Number(num);
                    }
                }
            },
            endchange:function(){
                if (this.formData.endDate != ''){
                    this.formData.endDate = this.dealDateStr(this.formData.endDate)  + " 23:59:59"
                    this.formData.end_date = this.formData.endDate

                    let  startDate = Date.parse(this.formData.startDate);
                    let  endDate = Date.parse(this.formData.endDate);
                    if (startDate>endDate){
                        this.formData.duration = 0;
                    }
                    if (startDate==endDate){
                        this.formData.duration = 0
                    }
                    let num = ((endDate - startDate)/(1*24*60*60*1000)).toFixed(0)
                    this.formData.duration = Number(num);
                }
            },
            durationProving:function(){
                let str = this.formData.duration
                // this.form.skus[e].Price 是input的值　　
                // 先把非数字的都替换掉，除了数字和.
                str = str.replace(/[^\d]/g, '');

                let num = Number(str)
                if (!num){
                    num = 1
                }

                this.formData.duration = num;
            },
            blur:function(){
                if (this.formData.startDate != ""){
                    this.formData.endDate = this.dealDate(this.formData.startDate,this.formData.duration) + " 23:59:59"
                    this.formData.end_date = this.formData.endDate
                }

            },
            dealDate:function(str,days){
                let date = new Date(str);
                if (days > 0){
                    days = days -1
                }

                let timeStr = Number(days) * 24 * 3600;
                if (date.getTime() > 99999999999){
                    timeStr = timeStr * 1000;
                }

                let dd = date.getTime() + timeStr

                let date2 = new Date(dd)

                return this.dealDateStr(date2)
            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
        }
    }
</script>

<style lang="scss" scoped>
.project-change-view{
  .el-form{
    .el-form-item__content{
      .el-input{
        width: 200px;
      }
      .el-select{
        width: 200px;
      }
      .el-cascader{
        width: 200px;
      }

      .el-textarea{
        width: 560px;
      }
    }
  }
}
</style>
